// 事件追踪页面的数据
var data = [
    {id:1,code:'GRB20180319102942699',category:'医疗医技',escalation:'2022-06-16',closure:'2022-06-16',status:'待处理'},
    {id:2,code:'GRB20180319102942698',category:'护理异常',escalation:'2022-06-16',closure:'2022-06-17',status:'待处理'},
    {id:3,code:'GRB20180319102942697',category:'输血不良',escalation:'2022-06-17',closure:'2022-06-18',status:'已通过'},
    {id:4,code:'GRB20180319102942696',category:'ICU病房',escalation:'2022-06-18',closure:'2022-06-18',status:'已通过'},
    {id:5,code:'GRB20180319102942695',category:'医疗器械',escalation:'2022-06-19',closure:'2022-06-19',status:'待处理'},
    {id:6,code:'GRB20180319102942694',category:'药物不良',escalation:'2022-06-19',closure:'2022-06-21',status:'已通过'},
    {id:7,code:'GRB20180319102942693',category:'医疗器械',escalation:'2022-06-20',closure:'2022-06-20',status:'待处理'},
    {id:8,code:'GRB20180319102942692',category:'医疗医技',escalation:'2022-06-21',closure:'2022-06-23',status:'已通过'},
    {id:9,code:'GRB20180319102942691',category:'护理异常',escalation:'2022-07-21',closure:'2022-07-23',status:'已通过'},
    {id:10,code:'GRB20180319102942690',category:'医疗器械',escalation:'2022-07-22',closure:'2022-07-23',status:'待处理'},
    {id:11,code:'GRB20180319102942689',category:'输血不良',escalation:'2022-08-01',closure:'2022-08-06',status:'待处理'},
    {id:12,code:'GRB20180319102942688',category:'输血不良',escalation:'2022-07-16',closure:'2022-07-26',status:'已通过'},
    {id:13,code:'GRB20180319102942687',category:'护理异常',escalation:'2022-07-17',closure:'2022-07-21',status:'待处理'},
    {id:14,code:'GRB20180319102942686',category:'医疗器械',escalation:'2022-08-02',closure:'2022-08-08',status:'待处理'},
    {id:15,code:'GRB20180319102942685',category:'输血不良',escalation:'2022-07-16',closure:'2022-07-17',status:'已通过'},
    {id:16,code:'GRB20180319102942684',category:'医疗医技',escalation:'2022-08-03',closure:'2022-08-16',status:'待通过'},
    {id:17,code:'GRB20180319102942683',category:'ICU病房',escalation:'2022-08-03',closure:'2022-08-16',status:'待处理'},
    {id:18,code:'GRB20180319102942682',category:'医疗医技',escalation:'2022-08-03',closure:'2022-08-11',status:'已通过'},
    {id:19,code:'GRB20180319102942681',category:'医疗医技',escalation:'2022-08-08',closure:'2022-08-16',status:'待处理'},
    {id:20,code:'GRB20180319102942680',category:'药物不良',escalation:'2022-07-16',closure:'2022-08-16',status:'已通过'},
    {id:21,code:'GRB20180319102942679',category:'护理异常',escalation:'2022-08-03',closure:'2022-08-03',status:'待处理'},
    {id:22,code:'GRB20180319102942678',category:'护理异常',escalation:'2022-07-23',closure:'2022-08-24',status:'已通过'},
    {id:23,code:'GRB20180319102942677',category:'医疗医技',escalation:'2022-08-20',closure:'2022-08-23',status:'待处理'},
];

//当前的页码
var page = 1;
//每页的条数
var count = 3;
//获取tbody
var oTBody = document.querySelector('tbody');
//获取分页容器
var oPagination = document.querySelector('.pagination');
//获取上一页的按钮
var oPrevBtn = document.querySelector('.prev')
//获取下一页的按钮
var oNextBtn = document.querySelector('.next')
//获取搜索的输入框和选择框
var oSearchInp = document.querySelector('.searchInp');
var oChose1 = document.querySelector('.chose1');
var oChose2 = document.querySelector('.chose2');
var oDate1 = document.querySelector('.date1');
var oDate2 = document.querySelector('.date2');
//获取搜索按钮
var oSearchBtn = document.querySelector('.searchBtn');
//获取修改的保存
var oEditSaveBtn=document.querySelector('.editSaveBtn');
// 获取清除innerHTML内容的按钮
var oDelBtn=document.querySelector('.del');
// 获取第一页按钮
var oFirBtn=document.querySelector('.first');


//页面初始化的渲染功能
function render() {
    //查看搜索框的内容
    var str1 = oSearchInp.value;//搜索的内容
    var str2 = oChose1.value;
    var str3 = oChose2.value;
    var str4 = oDate1.value==''?new Date('2002-8-25').getTime():new Date(oDate1.value).getTime(); //开始时间
    var str5= oDate2.value==''?new Date().getTime():new Date(oDate2.value).getTime(); //结束时间
    var searchData = [];//搜索后的数据
    var data1=[];
    var data2=[];
    var data3=[];
    /* if (str.trim() == '') {//没有搜索内容，全部都要
        searchData = data; //搜索的就是全部
    } else {
        //有搜索的内容
        for (var i = 0; i < data.length; i++) {
            //如果每条数据中的名字里面包含搜索的内容
            if (data[i].code.includes(str)) {
                //就把符合条件的内容放进渲染的数据中
                searchData.push(data[i]);
                // console.log(data[i])
            }
        }
    } */

    if(str1.trim()==''){
        data1 = data;
    }else{
        data1 = data.filter(function(v){
            /* if(v.code.includes(str)){
                return v;
            } */
            // console.log(v.code.includes(str1))
            return v.code.includes(str1)
        })
    }
    console.log('1',data1)

    // 第2个搜索条件框
    if(str2.includes('-')){
        data2 = data1;
    }else{
        data2 = data1.filter(function(v){
            return v.category.includes(str2)
        })
    }
    console.log('2',data2)

    // 第3个搜索条件框
    if(str3.includes('-')){
        data3 = data2;
    }else{
        data3 = data2.filter(function(v){
            return v.status.includes(str3)
        })
    }
    console.log('3',data3)

    // 第4个搜索条件框
    searchData = data3.filter(function(v){

        var time=new Date(v.closure).getTime();
        return time>=str4 && time<=str5
    })
    console.log('4',searchData)


    //让table为空
    oTBody.innerHTML = '';
    //根据count和page准备要渲染的数据
    var renderArr = searchData.slice((page - 1) * count, page * count);
    //循环要渲染的数据
    for (var i = 0; i < renderArr.length; i++) {
        //创建tr
        var oTr = document.createElement('tr');
        //给tr创建内容
        oTr.innerHTML = `
        <td>${renderArr[i].id}</td>
        <td>${renderArr[i].code}</td>
        <td>${renderArr[i].category}</td>
        <td>${renderArr[i].escalation}</td>
        <td>${renderArr[i].closure}</td>
        <td>${renderArr[i].status}</td>
        <td>
            <button class="btn btn-primary edit">编辑</button>
            <button class="btn btn-danger del">删除</button>
        </td>
    `;
        //把tr创建到tbody里面
        oTBody.appendChild(oTr);
    }
    

    //渲染页码
    //找到所有的1，2，3，4的页码
    var aPageBtn = document.querySelectorAll('.pageBtn');
    //删除所有的页码
    for (var i = 0; i < aPageBtn.length; i++) {
        oPagination.removeChild(aPageBtn[i].parentNode);
    }
    //根据数据的长度重新创建页码
    for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
        //创建li
        var oLi = document.createElement('li');
        //给li创建内容
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        //如果li和当前的页码一致，给他加一个选中的class
        if (i == page) {
            oLi.classList.add('active');
        }
        //在下一页的前面插入页码
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}


//一上来就渲染一次数据
render();
//给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
    //如果当前点击的按钮有pageBtn这个class名字
    if (event.target.className == 'pageBtn') {
        //修改全局的page
        page = event.target.innerText;
        //渲染table，渲染分页
        render();
    }
}
//给第一页、上一页、下一页加事件
oPrevBtn.addEventListener('click', prev);
oNextBtn.addEventListener('click', next);
oFirBtn.addEventListener('click',firstPage)
function prev() {
    if (page > 1) {
        page--;
        render();
    }
}
function next() {
    if (page < Math.ceil(data.length / count)) {
        page++;
        render();
    }
}
function firstPage(){
    page=1
    render();
}

//删除功能
oTBody.addEventListener('click', del);
function del() {
    if (event.target.className.includes('del')) {
        //找到id
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据对比
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                //删除id所对应的数据
                data.splice(i, 1);
            }
        }
        //重新渲染
        render();
    }
}

//搜索功能
oSearchBtn.addEventListener('click', searchFn);
function searchFn() {
    page = 1;
    render();
}

oDelBtn.addEventListener('click',delFn);
function delFn(){
    oSearchInp.value='';
    oChose1.value='---请选择---';
    oChose2.value='---请选择---';
    oDate1.value='';
    oDate2.value='';
    searchData=data;
    render();
}


//给所有的编辑按钮加事件
oTBody.addEventListener('click', openEdit);
function openEdit() {
    //判断事件源
    if (event.target.className.includes('edit')) {
        //让编辑框显示
        $('#editModal').modal('show');
        //确认是哪个id的数据
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据，找到对应id的，给编辑框赋值
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                document.querySelector('.editId').value =data[i].id ;

                document.querySelector('.editCode').value = data[i].code;

                document.querySelector('.editCategory').value = data[i].category;

                document.querySelector('.editEscalation').value = data[i].escalation;

                document.querySelector('.editClosure').value = data[i].closure;

                document.querySelector('.editStatus').value = data[i].status;
            }
        }
    }

}

//点击修改保存
oEditSaveBtn.addEventListener('click',editSave);
function editSave(){
    //看替换的是哪一条；
    var id=document.querySelector('.editId').value;
    //循环数据，找到对应的，更改
    for(var i=0;i<data.length;i++){
        if(data[i].id==id){
            data[i].code=document.querySelector('.editCode').value;
            data[i].category=document.querySelector('.editCategory').value;
            data[i].escalation=document.querySelector('.editEscalation').value;
            data[i].closure=document.querySelector('.editClosure').value;
            data[i].status=document.querySelector('.editStatus').value;
        }
    }
    //关闭弹框
    $('#editModal').modal('hide');
    //重新渲染
    render();
}


    











